<script setup>
import { Star, Sunny} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getHeatingValueService, updateHeatingValueService} from "@/api/requiredGoods.js";
import {ElMessage} from "element-plus";
import {useDefaultAvatarStore} from "@/stores/defaultAvatar.js";
import {useUserIdStore} from "@/stores/userInfo.js";
import {useRouter} from "vue-router";
const props = defineProps({
  requiredGoods:Object,
  mode:{
    type:Number, // 0: 浏览模式 1: 我的发布
    default:0
  }
})
const defaultAvatarStore = useDefaultAvatarStore();
//默认头像
const defaultPic = ref(defaultAvatarStore.defaultAvatar)
const requiredGoods =ref(props.requiredGoods)

const showPopover = ref(false) // 显示popover

//增加热力值
const updateHeatingValue = async () =>{
  await updateHeatingValueService(requiredGoods.value.id)
  let result = await getHeatingValueService(requiredGoods.value.id)
  requiredGoods.value.heatingValue = result.data
  ElMessage.success({
    message:"增加热力值成功!",
    type:"success",
    grouping:true
  })
}

const userIdStore = useUserIdStore();
const route = useRouter();

const contactSeller = (userId)=>{
  if (userIdStore.userId === userId){
    ElMessage({
      type: 'error',
      message: '不能联系自己哦',
      customClass: 'global-messageZindex'
    })
    return;
  }
  route.push(`/messageCenter?contactUserId=${userId}`)
}
</script>

<template>
<div class="item-container">
  <div class="top">
      <div class="popovers" @mouseenter="showPopover = true" @mouseleave="showPopover = false">
        <img :src="requiredGoods.userPic === null || requiredGoods.userPic === '' ? defaultPic : requiredGoods.userPic"
             alt="avatar"
             style="height: 100%;width: 40px;border-radius: 5px">
        <div class="popover" v-if="showPopover && mode === 0">
            <button @click="contactSeller(requiredGoods.userId)">发送消息</button>
            <button>查看主页</button>
        </div>
      </div>
    <div class="user-name"><p>{{requiredGoods.userName}}</p></div>
    <div class="push-time"><p>{{requiredGoods.updateTime}}</p></div>
  </div>
  <div class="middle">
    <p>{{requiredGoods.content}}</p>
  </div>
  <div class="bottom">
    <div class="left-bottom">
      <div style="display: flex;align-items: center;">
        <el-icon size="20px" style="color: #999999;"><Sunny /></el-icon>
        <p style="margin-left:5px;color: #999999;">{{requiredGoods.heatingValue}}</p>
      </div>
      <button class="star-button" @click="updateHeatingValue"><el-icon class="star-icon" size="20px"><Star /></el-icon></button>
    </div>
    <div class="right-bottom">
      <p style="color: #858383;">IP属地 {{requiredGoods.ipTerritory}}</p>
    </div>
  </div>
</div>
</template>

<style scoped>
.item-container{
  width: 80%;
  height: 180px;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  &:hover{
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }
}
.top{
  width: 90%;
  height: 40px;
  margin-top: 8px;
  display: flex;
  position: relative;
  .popovers{
    cursor: pointer;
    .popover{
      position: absolute;
      border-radius: 10px;
      padding: 0 10px;
      display: flex;
      top: 41px;
      left: -20px;
      flex-direction: column;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      /* 你可以根据需要添加箭头样式 */
      z-index: 1000;
      button{
        margin-top: 10px;
        border: none;
        color: #131313;
        &:hover{
          background-color: rgba(0, 0, 0, 0.1);
          color: #00c74b;
          cursor: pointer;
        }
        border-radius: 4px;
      }
      :last-child{
        margin-bottom: 10px;
      }
    }
  }
  .user-name{
    height: 100%;
    width: 250px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    p{
      font-size: 18px;
      font-weight: bold;
      margin: 0 0;
    }
  }
  .push-time{
    height: 100%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    p{
      font-size: 14px;
      color: #999999;
      margin: 0 0;
    }
  }
}
.middle{
  width: 80%;
  height: 90px;
  overflow: auto;
  padding: 5px;
  p{
    font-size: 16px;
    margin: 0 0;
    color: #333131;
  }
}
.bottom{
  width: 90%;
  height: 40px;
  display: flex;
}
.left-bottom{
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.right-bottom{
  width: 85%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.star-button{
  width: 40px;
  height: 40px;
  border: none;
  background-color: white;
  cursor: pointer;
  padding: 10px 0;
  .star-icon{
    &:hover{
      color: #ffd700;
      transition: all 0.3s;
    }
    :active{
      color: #d96d3f;
    }
  }
}
</style>